<%--
  Created by IntelliJ IDEA.
  User: tulufan
  Date: 2021/10/9
  Time: 20:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="images/x-icon" href="../image/toubiao.jpg">
    <link href="${pageContext.request.contextPath}/css/css_house.css" rel="stylesheet">
    <link  rel="stylesheet" href="../bootstrap-5.1.1-dist/css/bootstrap.min.css">
    <script src = "${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EtoidwbEK2q37Ex6UEIKP5Cu95NvKcAt"></script>
</head>

<style>
    /* fullLove.css */
    /* fullLove.css */
    .hearts {
        position: absolute;
        color: #E7273F;
        font-size: 15px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: fly 3s linear forwards;
    }
    @keyframes fly {
        to {
            transform: translate(-50%, -50px) scale(0);
        }
    }

    .heratPop{
        animation: pulse 1s linear infinite;
    }
    @keyframes pulse {
        0% {
            transform: rotate(-45deg) scale(1);
        }
        10% {
            transform: rotate(-45deg) scale(1.1);
        }
        20% {
            transform: rotate(-45deg) scale(0.9);
        }
        30% {
            transform: rotate(-45deg) scale(1.2);
        }
        40% {
            transform: rotate(-45deg) scale(0.9);
        }
        50% {
            transform: rotate(-45deg) scale(1.1);
        }
        60% {
            transform: rotate(-45deg) scale(0.9);
        }
        70% {
            transform: rotate(-45deg) scale(1);
        }
    }

    /* fullLove.css */
    .heart{
        background-color: #8a93a0;
        height: 13px;
        width: 13px;
        transform: rotate(-45deg) scale(1);
        display: inline-block;
    }
    .heart::before {
        content: '';
        position: absolute;
        top: -50%;
        left: 0;
        background-color: inherit;
        border-radius: 50%;
        height: 13px;
        width: 13px;
    }
    .heart::after {
        content: '';
        position: absolute;
        top: 0;
        right: -50%;
        background-color: inherit;
        border-radius: 50%;
        height: 13px;
        width: 13px;
    }
    /* fullLove.css */
    .hearts {
        position: absolute;
        color: #E7273F;
        font-size: 15px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: fly 3s linear forwards;
    }
    @keyframes fly {
        to {
            transform: translate(-50%, -50px) scale(0);
        }
    }

</style>
<body>
<!--<=========================头部导航==========================>-->
<div class="nav">
    <div class="head-logo">
        <a href="${pageContext.request.contextPath}" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="${pageContext.request.contextPath}/index" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/house_owner/houseadd.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">房源订单中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/order">房源订单中心</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">个人中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/personalCenter">个人中心</a> </li>
            </c:if>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <c:if test="${empty loginCustomer}">
            <a href="${pageContext.request.contextPath}/users/login.jsp">
                <img class="login-logo" src="image/login-logo.svg"/>
                <span class="login-title">登录</span>
            </a>
            <a href="">
                <img class="regist-logo" src="image/regist-logo.svg" >

                <img class="login-logo" src="${pageContext.request.contextPath}/image/login-logo.svg"/>
                <span class="login-title">登录</span>
            </a>
            <a href="">
                <img class="regist-logo" src="${pageContext.request.contextPath}/image/regist-logo.svg" >

                <span class="login-title">注册</span>
            </a>
        </c:if>
        <c:if test="${!empty loginCustomer}">
            欢迎${loginCustomer.cusNickname}登录，<a href="${pageContext.request.contextPath}/logout">退出</a>
        </c:if>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-1 col">
            <span class="text">苏州</span>
        </div>
        <div class="col-md-3 col">
            <input type="text" class="head-search" placeholder="请输入地点，房间名查询">
        </div>
        <div class="col-md-2 col">
            <input type="date" class="head-date">
        </div>
        <div class="col-md-1 col">
            <span class="text">至</span>
        </div>
        <div class="col-md-2 col">
            <input type="date" class="head-date">
        </div>
        <div class="col-md-1 col">
            <div class="s_mn_search_submit2">
                <input type="button" value="搜&nbsp;索&nbsp;房&nbsp;间" class="w_list_button" id="s_mn_button3" style="margin: 0 auto;margin-left:5px">
            </div> </div>

    </div>
    <div class = "row-cols-12 border">
        <div class="row">
            <div class="col-cols-2 f12">
                <ul class="select">
                    <li class="select-list">
                        <dl class="select1" id="select1">
                            <dt>房间位置：</dt>
                            <dd class="select-all selected"><a href="#">不限</a></dd>
                            <dd><a href="javascript:void(0)">行政区域</a></dd>
                            <dd><a href="javascript:void(0)">吴中区</a></dd>
                            <dd><a href="javascript:void(0)">昆山市</a></dd>
                            <dd><a href="javascript:void(0)">相城区</a></dd>
                            <dd><a href="javascript:void(0)">太仓市</a></dd>
                            <dd><a href="javascript:void(0)">常熟市</a></dd>
                            <dd><a href="javascript:void(0)">姑苏区</a></dd>
                            <dd><a href="javascript:void(0)">吴江区</a></dd>
                            <dd><a href="javascript:void(0)">工业园区</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-cols-2 f11">
                <ul class="select">
                    <li class="select-list">
                        <dl class="select2" id="select2">
                            <dt>房间户型：</dt>
                            <dd class="select-all selected"><a href="#">不限</a></dd>
                            <dd><a href="javascript:void(0)">一居</a></dd>
                            <dd><a href="javascript:void(0)">二居</a></dd>
                            <dd><a href="javascript:void(0)">三居</a></dd>
                            <dd><a href="javascript:void(0)">四居</a></dd>
                            <dd><a href="javascript:void(0)">四居以上</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-cols-2 f10">
                <ul class="select">
                    <li class="select-list">
                        <dl class="select3" id="select3">
                            <dt>房间价格：</dt>
                            <dd class="select-all selected"><a href="#">不限</a></dd>
                            <dd><a href="javascript:void(0)">0-100</a></dd>
                            <dd><a href="javascript:void(0)">101-200</a></dd>
                            <dd><a href="javascript:void(0)">201-300</a></dd>
                            <dd><a href="javascript:void(0)">301-400</a></dd>
                            <dd><a href="javascript:void(0)">401-500</a></dd>
                            <dd><a href="javascript:void(0)">501-800</a></dd>
                            <dd><a href="javascript:void(0)">801-1000</a></dd>
                            <dd><a href="javascript:void(0)">1001-1500</a></dd>
                            <dd><a href="javascript:void(0)">1500以上</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-cols-2 f9">
                <ul class="select">
                    <li class="select-list">
                        <dl class="select4" id="select4">
                            <dt>房间类型：</dt>
                            <dd class="select-all selected"><a href="#">不限</a></dd>
                            <dd><a href="javascript:void(0)">别墅套件</a></dd>
                            <dd><a href="javascript:void(0)">四合院</a></dd>
                            <dd><a href="javascript:void(0)">农家乐</a></dd>
                            <dd><a href="javascript:void(0)">独栋别墅</a></dd>
                            <dd><a href="javascript:void(0)">小区住宅</a></dd>
                            <dd><a href="javascript:void(0)">酒店式公寓</a></dd>
                            <dd><a href="javascript:void(0)">普通公寓</a></dd>
                            <dd><a href="javascript:void(0)">Loft公寓</a></dd>
                            <dd><a href="javascript:void(0)">联排别墅</a></dd>
                            <dd><a href="javascript:void(0)">客栈别墅</a></dd>
                            <dd><a href="javascript:void(0)">自建住宅</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="width1190">
        <div class="pro-left">
            <c:forEach var="hotel" items="${serverResponse.data}" >
                <dl class="hotelwrap">
                    <dt><a href=""><img src="${hotel.hotelOther1}" width="286" height="188" /></a></dt>
                    <dd>
                        <h3>
                            <a href="${pageContext.request.contextPath}/houses/${hotel.hotelId}" style="text-decoration: none">${hotel.hotelName}
                            </a>
                        </h3>
                        <div class="likeBtn" id="likeBtn" style="width:30px;margin-left: 460px" >
                            <button style="width: 40px;height: 40px;border-radius: 20px;background-color: antiquewhite;border: none">
                                <span class="heart" id="heart" style="background-color: darkgray"></span>
                            </button>
                        </div>
                        <div class="pro-wei">
                            <img src="../image/weizhi.png" width="12" height="16" /> <strong class="red">${hotel.hotelArea}</strong>
                        </div>
                        <div class="pra-fa" style="margin-top: -10px">
                            <button class="buttonhouse1" >${hotel.hotelAvgscore}·15条评论</button>
                            <button class="buttonhouse2" >超赞房东</button>
                            <button class="buttonhouse2" >可开发票</button>
                            <button class="buttonhouse" >自助入住</button>
                            <button class="buttonhouse" >投影仪</button>
                            <button class="buttonhouse" >近地铁站</button>
                        </div>
                        <div class="pro-di">
                            <img src="../image/dianzan.jpg" class="pro-dianzan">
                            <span>点赞数</span>
                            <span>${hotel.hotelFabulousNumber}</span>
                            <img src="../image/pinglun.png" class="pro-pinglun">
                            <span>评论数</span>
                            <span >111</span>
                        </div>
                    </dd>
                    <div class="price">¥ <span>${hotel.hotelPrice}</span><span class="font12">元/日</span></div>
                    <div class="clears"></div>
                </dl>
            </c:forEach>
            <%--================分页===============--%>
            <div class="pageInfo" style="margin-left: 460px ;z-index: 999 ;position: absolute;font-size: 15px;font-weight: bold">
            </div><!--pro-left/-->
            <div id="allmap" style="position: absolute;
         margin-top: -3150px;
         float:left;
         width:520px;
         height: 1000px;
         padding:10px 0 0 0;
         margin-left: 840px;">
            </div>
        </div><!--right-pro/-->
    </div><!--pro-right/-->
    <div class="clears"></div>
</div><!--width1190/-->
</div><!--content/-->
<script>
    var result = "";
    var hotelArea = "";
    var hotelType = "";
    var roomType = "";
    var hotelPrice = "";
    document.querySelector(".border").onclick = function (event) {
        var target = event.target;
        var ele = target.parentElement.parentElement.firstElementChild.textContent;
        console.log(ele);

        if(ele == "房间位置：" || ele=="房间类型："|| ele=="房间价格："|| ele=="房间户型："){
            var siblings = target.parentElement.parentElement.children;
            for (var j = 0; j < siblings.length; j++) {
                siblings[j].className = '';
            }
            console.log("hello");
            target.parentElement.className = "selected";
            getResult();
        }

        function getResult(){
            hotelArea = document.querySelector(".select1 .selected").firstElementChild.textContent;
            hotelType = document.querySelector(".select2 .selected").firstElementChild.textContent;
            roomType = document.querySelector(".select4 .selected").firstElementChild.textContent;
            hotelPrice = document.querySelector(".select3 .selected").firstElementChild.textContent;
            console.log("hotelArea:"+hotelArea+"hotelType:"+hotelType+"roomType:"+roomType+"hotelPrice:"+hotelPrice)
            HotelList(hotelArea,hotelType,roomType,hotelPrice,1);
        }
    }



    //异步请求渲染
    var gethotelArea;
    var gethotelType;
    var getroomType;
    var gethotelPrice;
    var getpageNum;
    var minPrice;
    var maxPrice;

    //HotelList("不限","不限","不限","不限",1);
    function  HotelList(  hotelArea,hotelType,roomType,hotelPrice,pageNum) {
        gethotelArea = hotelArea;
        gethotelType = hotelType;
        getroomType = roomType;
        gethotelPrice = hotelPrice;
        getpageNum = pageNum;

        console.log(">>>>>>>>>>>>>>hotelArea:"+hotelArea);
        console.log(">>>>>>>>>>>>>>roomType:"+roomType);
        console.log(">>>>>>>>>>>>>>hotelPrice:"+hotelPrice);
        console.log(">>>>>>>>>>>>>>hotelType:"+hotelType);

        var minPrice = 1.0;
        var maxPrice = 1.0;
        if (hotelPrice == "不限") {
            minPrice = -1;
            maxPrice = -1;
        } else if (hotelPrice == "0-100") {
            minPrice = -1;
            maxPrice = 101;
        } else if (hotelPrice == "101-200元") {
            minPrice = 101;
            maxPrice = 200;
        } else if (hotelPrice == "201-300元") {
            minPrice = 201;
            maxPrice = 300;
        } else if (hotelPrice == "301-400") {
            minPrice = 301;
            maxPrice = 400;
        } else if (hotelPrice == "401-500") {
            minPrice = 401;
            maxPrice = 500;
        } else if (hotelPrice == "501-800") {
            minPrice = 501;
            maxPrice = 800;
        } else if (hotelPrice == "801-1000") {
            minPrice = 801;
            maxPrice = 1000;
        } else if (hotelPrice == "1001-1500") {
            minPrice = 1001;
            maxPrice = 1500;
        }else if(hotelPrice == "1500元以上"){
            minPrice = 1500;
            maxPrice = -1;
        }
        if(hotelType == "不限")
            hotelType = "-1";
        if(hotelArea == "不限")
            hotelArea = "-1";
        if(roomType == "不限")
            roomType = "-1";


        var url = '${pageContext.request.contextPath}/hotel';
        console.log("=============url:"+url);
        console.log("=============roomType:"+roomType);
        console.log("=============minPrice:"+minPrice);
        console.log("=============maxPrice:"+maxPrice);
        console.log("=============hotelType:"+hotelType);


        $.get(url,{
            hotelArea:hotelArea,
            roomType:roomType,
            minPrice:minPrice,
            maxPrice:maxPrice,
            hotelType:hotelType,
            pageNum:pageNum
        },function (result) {
            console.log("result" + JSON.stringify(result));



            $(".pro-left").html("");
            if (result.code == 200) {
                var hotelArray = result.data.list;
                console.log("hotelArray:" + hotelArray);
                console.log("hotel arr length:" + hotelArray.length);


                for(var i = 0;i< hotelArray.length;i++) {
                    var hotelId = hotelArray[i].hotelId;
                    var hotelName = hotelArray[i].hotelName;
                    var hotelArea = hotelArray[i].hotelArea;
                    var hotelAvgscore = hotelArray[i].hotelAvgscore;
                    var hotelFabulousNumber = hotelArray[i].hotelFabulousNumber;
                    var hotelPrice = hotelArray[i].hotelPrice;
                    var hotelType = hotelArray[i].hotelType;
                    var hotelOther1 = hotelArray[i].hotelOther1;

                    console.log("hotelName:" + hotelName);
                    console.log("hotelArea:" + hotelArea);
                    console.log("hotelAvgscore:" + hotelAvgscore);
                    console.log("hotelFabulousNumber:" + hotelFabulousNumber);
                    console.log("hotelPrice:" + hotelPrice);

                    var liEle = '   <dl class="hotelwrap">\n' +
                        '                <dt><a href=""><img src='+hotelOther1+' style=" width="286" height="188" /></a></dt>\n' +
                        '                <dd>\n' +
                        '                    <h3>\n' +
                        '                        <a href="${pageContext.request.contextPath}/houses/'+hotelId+'" style="text-decoration: none">' +hotelName+
                        '                        </a>\n' +
                        '                    </h3>\n' +
                        '                    <a href="">\n' +
                        '                        <button class="pro-fdtouxiang">\n' +
                        '\n' +
                        '                        </button>\n' +
                        '                    </a>\n' +
                        '                    <div class="pro-wei">\n' +
                        '                        <img src="../image/weizhi.png" width="12" height="16" /> <strong class="red">'+hotelArea+'</strong>\n' +
                        '                    </div>\n' +
                        '                    <div class="pra-fa">\n' +
                        '                        <button class="buttonhouse1" >'+hotelAvgscore+'·15条评论</button>\n' +
                        '                        <button class="buttonhouse2" >超赞房东</button>\n' +
                        '                        <button class="buttonhouse2" >可开发票</button>\n' +
                        '                        <button class="buttonhouse" >自助入住</button>\n' +
                        '                        <button class="buttonhouse" >投影仪</button>\n' +
                        '                        <button class="buttonhouse" >近地铁站</button>\n' +
                        '                    </div>\n' +
                        '                    <div class="pro-di">\n' +
                        '                        <img src="../image/dianzan.jpg" class="pro-dianzan">\n' +
                        '                        <span>点赞数</span>\n' +
                        '                        <span>'+hotelFabulousNumber+'</span>\n' +
                        '                        <img src="../image/pinglun.png" class="pro-pinglun">\n' +
                        '                        <span>评论数</span>\n' +
                        '                        <span >111</span>\n' +
                        '                    </div>\n' +
                        '                </dd>\n' +
                        '                <div class="price">¥ <span>'+hotelPrice+'</span><span class="font12">元/日</span></div>\n' +
                        '                <div class="clears"></div>\n' +
                        '            </dl>\n' +
                        '        ';

                    $(".pro-left").append(liEle);
                }


                //分页渲染
                $(".pageInfo").html("");
                /* var pagenum = pageNum.data.pageNum;*/
                var total = result.data.total;
                console.log("total:" + total);
                var pages = result.data.pages;
                console.log("pages:" + pages);
                var prepage = result.data.prepage;
                console.log("prepage:" + prepage);
                var nextpage = result.data.nextPage;
                console.log("nextPage:" + nextpage);
                pageInfo = ' 共有<span>'+total +'</span>条记录，'  ;

                var prePageEle = '';
                if (prepage != 0) {
                    prePageEle = "<a style=\"color: #0ba1a1\" href=\"javascript:HotelList('" + hotelArea + "','" + hotelType + "','" + hotelPrice + "','" + roomType + "','" + result.data.prePage + "')\">上一页</a>";
                }

                var nextPageEle = '';
                if (result.data.pageNum != pages) {
                    nextPageEle = "<a style=\"color: #0ba1a1\" href=\"javascript:HotelList('" + hotelArea + "','" + hotelType + "','" + hotelPrice + "','" + roomType + "','" + result.data.nextPage + "')\">下一页,</a>&nbsp;&nbsp;&nbsp;&nbsp;";
                }
                var currentPageEle = '当前是第' + result.data.pageNum + '页';
                var totalPageEle = '共有记录' + total + '条,共有' + pages + '页';


                $(".pageInfo").append(prePageEle);
                $(".pageInfo").append(currentPageEle);
                $(".pageInfo").append(nextPageEle);
                $(".pageInfo").append(totalPageEle);
            }else {
                $(".pro-left").text("没有查询到相关信息");

            }


        })
    }
</script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");

    var point = new BMap.Point(120.62183, 31.330945);//目标地址经纬度
    map.centerAndZoom(point,12);//地图缩放级别
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());   //平移缩放控件
    map.addControl(new BMap.ScaleControl());        //比例尺
    map.addControl(new BMap.OverviewMapControl());  //缩略地图
    map.addControl(new BMap.MapTypeControl());      //地图类型

    //获取浏览器定位
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})
</script>
<script>
    // love.js
    const likeBtn = document.getElementById('likeBtn');
    const heart=document.getElementById('heart')
    likeBtn.addEventListener('mousemove',() => {
        heart.classList.add('heratPop')
    })
    likeBtn.addEventListener('mouseout',() => {
        heart.classList.remove('heratPop')
    })
    // love.js
    function addHearts(content) {
        for(let i=0; i<10; i++) {
            setTimeout(() => {
                const fullHeart = document.createElement('div');
                fullHeart.classList.add('hearts');
                fullHeart.innerHTML = '<span class="heart"></span>';
                fullHeart.style.left = Math.random() * 100 + '%';
                fullHeart.style.top = Math.random() * 100 + '%';
                fullHeart.style.transform = `translate(-50%, -50%) scale(${Math.random()+0.3}) `
                fullHeart.style.animationDuration = Math.random() * 2 + 3 + 's';
                fullHeart.firstChild.style.backgroundColor='#ed3056'
                content.appendChild(fullHeart);
                setTimeout(() => {
                    fullHeart.remove();
                }, 3000);
            }, i * 100)
        }
    }

</script>
</body>
</html>